<template>
	<view class="content-box"> 
		<study-word @module-event="resetCurrent" :current="current" ></study-word>
		<view class="bottombtn bottom-btn-box">
			<u-button v-if="visiblePrevBtn" @click="preWord" style="width:45%" class="next-btn flex-1" type="warning" :plain="true"><view class="next-text">上一个</view></u-button>	
			<view class="w-20rpx" v-if="visiblePrevBtn&&visibleNextBtn"></view>
			<u-button v-if="visibleNextBtn" @click="nextWord" style="width:45%" class="next-btn flex-1" type="warning" :plain="true"><view class="next-text">下一个</view></u-button>
			<view class="w-20rpx" v-if="(visiblePrevBtn||visibleNextBtn)&&visibleOverBtn"></view>
			<u-button v-if="visibleOverBtn" @click="handelNext" style="width:45%" class="next-btn flex-1" type="warning" :plain="true"><view class="next-text">开始回顾</view></u-button>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted, computed } from 'vue';
	import { IWord, useStudyStore } from '@/store/study'; 
	import { deepClone } from '@/utils';
	import StudyWord from '@/pages-study/components/study-word/study-word.vue';
	
	/** 步骤：单词学习环节 */
	defineOptions({
		name: 'step-word-learn',
		inheritAttrs: false,
		options: {
			virtualHost: true
		}
	});
	// 声明组件基本要素
	const emit = defineEmits(['module-event']);
	// hooks 初始化
	const studyStore = useStudyStore();
	
	// 声明用户变量
	const current = ref(null);
	const stepData = ref<IWord[]>(null);
	const showPerbtn = ref(false);
	const showNextbtn = ref(true);
	
	const visiblePrevBtn = computed(() => {
		if (!stepData.value || stepData.value.length === 0 || current.value === null) {
			return false;
		}
		//console.log('visiblePrevBtn')
		const index = stepData.value.findIndex((wordInfo: IWord) => wordInfo.Word.toLowerCase() === current.value.Word.toLowerCase())
		return index > 0;
	});
	const visibleNextBtn = computed(() => {
		if (!stepData.value || stepData.value.length === 0 || current.value === null) {
			return false;
		}
		//console.log('visibleNextBtn')
		const index = stepData.value.findIndex((wordInfo: IWord) => wordInfo.Word.toLowerCase() === current.value.Word.toLowerCase())
		return index < stepData.value.length - 1 && index > -1;
	});
	const visibleOverBtn = computed(() => {
		if (!stepData.value || stepData.value.length === 0 || current.value === null) {
			return false;
		}
		//console.log('visibleOverBtn')
		const index = stepData.value.findIndex((wordInfo: IWord) => wordInfo.Word.toLowerCase() === current.value.Word.toLowerCase())
		return index === stepData.value.length - 1;
	})
	
	const showreview = ref(false);
	
	// 声明函数
	const handelNext = () => {
		emit('module-event', { action: 'next' });
	}
	function nextWord(){
		
		if (current.value == null) {
			// console.log('stepData.value', stepData.value)
			current.value = stepData.value[0]
			// console.log('current.value new', JSON.stringify(current.value))
		} else {
			// console.log('stepData.value', stepData.value)
			// console.log('current.value old', JSON.stringify(current.value))
			for (let i = 0; i < stepData.value.length; i++) {
				if (current.value.Word.toLowerCase() === stepData.value[i]["Word"].toLowerCase()) {
					if (i < stepData.value.length - 1) {
						current.value = stepData.value[i + 1];
						// console.log('current.value new', JSON.stringify(current.value))
					}
					break;
				}
			}
		}
	}
	
	function preWord(){
		for(var i=0;i<stepData.value.length;i++){
			if(current.value.Word == stepData.value[i]["Word"]){
				if(i==1){
					showPerbtn.value = false;
				}
				if(i>0){
					current.value = stepData.value[i-1];
				}
				break;
			}
		}
	}
	
	function resetCurrent(data: IWord){
		const index = stepData.value.findIndex(item => item.Word.toLowerCase() === data.Word.toLowerCase())
		stepData.value[index] = deepClone(data);
		current.value = stepData.value[index];
	}
	
	/** 生命周期钩子函数：页面加载完毕 */
	onMounted(()=>{  
		const copy: IWord[] = deepClone(studyStore.wordGroup);
		stepData.value = copy.filter(item => item.NeedRemeber);
		nextWord();
	})
	

</script>


<style lang="scss" scoped>
	
	.bottombtn{
		// position:absolute;
		// bottom:30rpx;
		// left:0rpx;
		// width:100%;
		flex-shrink: 0;
		display: flex;
		margin-top: 10rpx;
	}
	
	.content-box{
		--font-color: #332c2b;
		position: relative;
		display: flex;
		flex-flow: column;
		flex: 1;
		margin: 0 15px;
		
		.option-box {
			display: flex;
			height: 100rpx;
			align-items: center;
		
			.left {
				flex: 1;
				display: flex;
				align-items: center;
		
				.read-text {
					color: #757475;
					margin-right: 20rpx;
					font-size: var(--text-18);
				}
			}
		
			.process {
				padding: 10rpx 14rpx;
				color: #f55f22;
				background-color: #fed7c6;
				border-radius: 30rpx;
				min-width: 150rpx;
				text-align: center;
			}
		}
		
		.detail {
			flex: 1; 
		}
	}
	
	.next-text{
		font-size: var(--text-18);
		font-weight: bold;
		display: flex;
	}
	
	/* 针对 1280px 分辨率 */
	@media(min-width:1200px) {
		.content-box {
			width: 2400rpx;
			margin: 0 auto !important;
		}
		
		.process{
			min-width: 238rpx;
		}
	
		.detail {
			
		}
	}
</style>